<template>
	<div
		:style="{ zIndex: zIndex, height: height, width: width }"
		class="pan-item"
	>
		<div class="pan-info">
			<div class="pan-info-roles-container">
				<slot />
			</div>
		</div>
		<!-- eslint-disable-next-line -->
    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
	</div>
</template>

<script>
	export default {
		name: 'PanThumb',
		props: {
			image: {
				type: String,
				required: true
			},
			zIndex: {
				type: Number,
				default: 1
			},
			width: {
				type: String,
				default: '150px'
			},
			height: {
				type: String,
				default: '150px'
			}
		}
	};
</script>

<style scoped>
	.pan-item {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		display: inline-block;
		position: relative;
		cursor: default;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}

	.pan-info-roles-container {
		padding: 20px;
		text-align: center;
	}

	.pan-thumb {
		width: 100%;
		height: 100%;
		background-position: center center;
		background-size: cover;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		transform-origin: 95% 40%;
		transition: all 0.3s ease-in-out;
	}

	/* .pan-thumb:after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 50%;
  top: 40%;
  left: 95%;
  margin: -4px 0 0 -4px;
  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
} */

	.pan-info {
		position: absolute;
		width: inherit;
		height: inherit;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
	}

	.pan-info h3 {
		color: #fff;
		text-transform: uppercase;
		position: relative;
		letter-spacing: 2px;
		font-size: 18px;
		margin: 0 60px;
		padding: 22px 0 0 0;
		height: 85px;
		font-family: 'Open Sans', Arial, sans-serif;
		text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
	}

	.pan-info p {
		color: #fff;
		padding: 10px 5px;
		font-style: italic;
		margin: 0 30px;
		font-size: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
	}

	.pan-info p a {
		display: block;
		color: #333;
		width: 80px;
		height: 80px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		color: #fff;
		font-style: normal;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 9px;
		letter-spacing: 1px;
		padding-top: 24px;
		margin: 7px auto 0;
		font-family: 'Open Sans', Arial, sans-serif;
		opacity: 0;
		transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s,
			background 0.2s linear 0s;
		transform: translateX(60px) rotate(90deg);
	}

	.pan-info p a:hover {
		background: rgba(255, 255, 255, 0.5);
	}

	.pan-item:hover .pan-thumb {
		transform: rotate(-110deg);
	}

	.pan-item:hover .pan-info p a {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}
</style>
